<template>
  <div class="main">
    <van-sticky>
      <div class="nav">
        <img :src="back" alt="" @click="handleBack"/>
        <div>账号与安全</div>
      </div>
    </van-sticky>
    <div class="body">
      <van-cell title="手机号" is-link :value="userInfo.phone" @click="loginPhone"/>
      <van-cell title="登录密码" is-link @click="loginPassword"/>
      <van-cell title="注销账号" is-link @click="cacleAccount" style="color: rgba(242, 150, 0, 1);"/>
      <van-cell title=""/>
    </div>
    <van-popup v-model:show="showCenter" round>
      <div class="dialog">
        <div class="title">您确定要注销该账号并且删除个人的所有数据吗？</div>
        <div class="btn">
          <div @click="cacleAccount">取消</div>
          <div @click="confirm()">确定</div>
        </div>
      </div>
    </van-popup>

  </div>
</template>

<script>
import {removeUser} from "../../../api/my";
import {Dialog} from 'vant';
import {mapState} from "vuex";
import {userInfo} from "../../../api/api";

export default {
  name: "accountOrSecurity",
  data() {
    return {
      back: require("@/assets/my/back.png"),
      setImg: require("@/assets/my/set-icon.png"),
      showCenter: false
    }
  },
  mounted() {
    console.log(this.userInfo);
  },
  computed: {
    ...mapState(['userInfo']),
  },
  methods: {
    handleBack() {
      // this.$router.go(-1);
      this.$router.push({path:'/setting'})
    },
    loginPassword() {
      this.$router.push(
          {
            path: '/loginPassword',
            query: {}
          })
    },
    loginPhone(){
      this.$router.push(
        {
          path: '/settingPhone',
          query: {}
        }
      )
    },
    cacleAccount() {
      Dialog.confirm({
        title: '提示',
        message: '您确定要注销该账号\n并且删除个人的所有数据吗？',
        confirmButtonColor: 'rgba(242, 150, 0, 1)'
      }).then(() => {
        this.confirm()
      }).catch(err => {

      })
    },
    confirm() {
      removeUser().then(res => {
        console.log('---', res)
        if (res.success) {
          console.log('注销成功，并根据协议给app发送退出登录的消息，跳转到登录页面')
          let message = {
            action: 'logout',
            param: {
              type: "logout",            //必填
              name: 'my/setting',
              callback: 1
            }
          }
          // console.log(message)
          getInfoFromVue.postMessage(JSON.stringify(message))
        }
      }).catch(err => {
        console.log(err)
      })
    }
  }
}
</script>

<style scoped lang="less">
.main {
  height: 100vh;
  padding: 0px 15px;

  .nav {
    height: 44px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 20px;
    font-weight: 500;

    > img {
      width: 10px;
      height: 16px;
      position: absolute;
      left: 15px;
    }
  }

  .body {
    padding-top: 30px;
    /deep/ .van-cell__title {
      font-size: 17px;
      font-weight: 400;
    }
    /deep/ .van-cell__value{
      font-size: 17px;
      font-weight: 400;
    }
  }

  .dialog {
    width: 200px;
    height: 100px;
    padding: 10px;

    .title {
      font-size: 17px;
      font-weight: 400;
      letter-spacing: 0px;
      line-height: 24.62px;
      color: rgba(84, 84, 84, 1);
      vertical-align: top;
      text-align: center;
    }

    .btn {
      padding-top: 30px;
      display: flex;
      justify-content: space-around;
      align-items: center;

      .btn-item {

      }
    }
  }
}
</style>
